微信小程序 |
您所在的位置：网站首页 › after class手机版 › 微信小程序 |
微信小程序
|
大家有没有遇到这样的一种现象，在看复杂的wxss，有时候总是理不清，比如： 第一种：before ，after恰当的使用before和after能很好的减少层级的嵌套，提升渲染的性能和速度 效果一（最基本的效果）：
代码跟上面的一样，只是有三处地方需要改动：（主要是使用 attr()） 1、content: attr(href); 2、500 3、data里面添加值：valueTest: ‘hello’ 效果三：before前面相当于是一个view了， 下面是效果图： 示例： .view_1{ width: 100%; height: 100%; } .view_1 image { width: 90rpx; height: 90rpx; } 解释2：.view_1 image 表示设置view里面的image控件长宽为90rpx 第三种： @import/** other.wxss **/ .appText{ margin:10px; }/** app.wxss **/ @import "other.wxss"; .content_text:{ margin:15px; } 解释3：app.wxss是全局样式，作用于每一个页面，而page下的每一个的wxss文件只作用于当前页面，并对全局样式中的相同属性会覆盖。 第四种： wxml中 500 .container_1 { width: auto; margin: 30rpx; text-align: center; } .view_1 { position: relative; display: inline-block; font-size: 70rpx; color: red; } .view_2 { background-color: #6699FF; } 解释4：只要一个 class=“view_1” 的效果图为： 没有以上代码的效果： 添加了以上代码的效果 表示所有包含“animation-”都会巨有如下的属性 [class*=animation-] { /* 设置动画在两秒内完成: */ animation-duration: 0.5s; /* 动画以低速结束。 */ animation-timing-function: ease-out; animation-fill-mode: both; } /* 这里的animation-1就具备上面的那些属性 */ animation-1{ display:flex } 第八种：wxss中使用变量[data-tab=“1”]
wxss代码： .view2[data-tab="1"] { background-color: rgb(232, 241, 148); height: 200rpx; margin: 20rpx; } .view2[data-tab="0"] { background-color: rgb(185, 250, 166); height: 200rpx; margin: 20rpx; } |
代码如下：
代码为：（view_1还是用的上面的view_1）
两个都要 class=“view_1 view_2” 的效果图为： 
wxml代码：【本文地址】
今日新闻 |
推荐新闻 |